<template>
    <div>
        <div>
            <el-form label-width="100px">
                <el-form-item label="红色长方形：">
                    <el-button type="primary" @click="moveUp">上移</el-button>
                    <el-button type="primary" @click="moveDown">下移</el-button>
                </el-form-item>
                <el-form-item label="绿色长方形：">
                    <el-button type="primary" @click="moveLeft">左移</el-button>
                    <el-button type="primary" @click="moveRight">右移</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">
                    <v-rect :config="{
                          x: 0,
                          y: 0,
                          width: this.formData.rectWidth,
                          height: this.formData.rectHeight,
                          stroke: 'black',
                        }"
                    />

                    <v-rect :config="{
                          x: this.formData.hRectX,
                          y: this.formData.hRectY,
                          width: this.formData.hRectWidth,
                          height: this.formData.hRectHeight,
                          stroke: 'red',
                        }"
                    />

                    <v-rect :config="{
                          x: this.formData.vRectX,
                          y: this.formData.vRectY,
                          width: this.formData.vRectWidth,
                          height: this.formData.vRectHeight,
                          stroke: 'green',
                        }"
                    />

                </v-layer>
            </v-stage>
        </div>
    </div>
</template>

<script>
    // import Konva from "konva";
    const width = window.innerWidth - 50;
    const height = 320;
    export default {
        name: "pingyi.vue",
        data() {
            return {
                formData: {
                    rectWidth: 500,
                    rectHeight: 300,
                    hRectX: 0,
                    hRectY: 130,
                    hRectWidth: 500,
                    hRectHeight: 20,
                    vRectX: 200,
                    vRectY: 0,
                    vRectWidth: 20,
                    vRectHeight: 300,
                },
                stageSize: {
                    width: width,
                    height: height
                },
            }
        },
        methods: {
            moveUp() {
                if (this.formData.hRectY <= 0) {
                    this.$message.info('已到达边缘')
                    return
                }
                this.formData.hRectY -= 10
            },
            moveDown() {
                if (this.formData.hRectY + this.formData.hRectHeight >= this.formData.rectHeight) {
                    this.$message.info('已到达边缘')
                    return
                }
                this.formData.hRectY += 10
            },
            moveLeft() {
                if (this.formData.vRectX <= 0) {
                    this.$message.info('已到达边缘')
                    return
                }
                this.formData.vRectX -= 10
            },
            moveRight() {
                if (this.formData.vRectX + this.formData.vRectWidth >= this.formData.rectWidth) {
                    this.$message.info('已到达边缘')
                    return
                }
                this.formData.vRectX += 10
            },
        }
    }
</script>

<style scoped>

</style>
